<template>
  <div class="dashboard-container">
    <!-- 顶部装饰 -->
    <dv-decoration-10 class="top-border-decoration" />
    
    <!-- 顶部标题区 -->
    <div class="header tech-blue-header">
      <!-- 左侧装饰 -->
      <dv-decoration-5 class="header-decoration left-decoration" />
      
      <!-- 中间标题区 -->
      <dv-border-box-12 class="title-box tech-blue-border">
        <div class="header-title">
          <dv-decoration-8 class="tech-decoration top-decoration" />
          <span class="title-text tech-title">第三工程代建办项目管理数据大屏</span>
          <dv-decoration-8 class="tech-decoration bottom-decoration" />
        </div>
      </dv-border-box-12>
      
      <!-- 右侧装饰 -->
      <dv-decoration-5 class="header-decoration right-decoration" />
      
      <!-- 时间显示 -->
      <dv-border-box-13 class="time-box tech-blue-border">
        <div class="header-time">{{ currentTime }}</div>
      </dv-border-box-13>
    </div>

    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 左侧数据面板 -->
      <div class="left-panel">
        <!-- 项目统计模块 -->
        <div class="panel-item">
          <dv-border-box-8 class="panel-border tech-blue-border">
            <div class="panel-header tech-blue-header">
              <span class="panel-title-decoration"></span>
              <div class="panel-title">项目统计</div>
              <span class="panel-title-decoration"></span>
            </div>
            <div class="panel-content">
              <div class="stats-container">
                <div class="stat-card">
                  <dv-border-box-8 class="stat-border">
                    <div class="stat-content tech-blue-content">
                      <dv-digital-flop :config="projectTotalConfig" />
                      <div class="stat-label">总项目</div>
                    </div>
                  </dv-border-box-8>
                </div>
                <div class="stat-card">
                  <dv-border-box-8 class="stat-border">
                    <div class="stat-content tech-blue-content">
                      <dv-digital-flop :config="projectCompletedConfig" />
                      <div class="stat-label">已移交</div>
                    </div>
                  </dv-border-box-8>
                </div>
                <div class="stat-card">
                  <dv-border-box-8 class="stat-border">
                    <div class="stat-content tech-blue-content">
                      <dv-digital-flop :config="projectInProgressConfig" />
                      <div class="stat-label">实施中</div>
                    </div>
                  </dv-border-box-8>
                </div>
                <div class="stat-card">
                  <dv-border-box-8 class="stat-border">
                    <div class="stat-content tech-blue-content">
                      <dv-digital-flop :config="projectFocusConfig" />
                      <div class="stat-label">重点关注</div>
                    </div>
                  </dv-border-box-8>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>

        <!-- 项目阶段分布模块 -->
        <div class="panel-item">
          <dv-border-box-8 class="panel-border tech-blue-border">
            <div class="panel-header tech-blue-header">
              <span class="panel-title-decoration"></span>
              <div class="panel-title">项目阶段分布</div>
              <span class="panel-title-decoration"></span>
            </div>
            <div class="panel-content">
              <div class="phase-distribution">
                <div class="phase-item" 
                  v-for="(phase, index) in projectPhases" 
                  :key="index"
                  :class="`phase-type-${index}`">
                  <div class="phase-indicator"></div>
                  <div class="phase-name">{{ phase.name }}</div>
                  <div class="phase-bar-container">
                    <dv-percent-pond 
                      :config="{
                        value: phase.percentage,
                        borderWidth: 0,
                        borderRadius: 3,
                        borderGap: 0,
                        colors: phase.colors,
                        fontSize: 0,
                        textColor: 'transparent',
                        lineDash: [0, 0],
                        localGradient: true
                      }"
                    />
                  </div>
                  <div class="phase-value">{{ phase.value }}</div>
                  <div class="phase-percentage">{{ phase.percentage }}%</div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>

        <!-- 项目状态分布模块 -->
        <div class="panel-item">
          <dv-border-box-8 class="panel-border tech-blue-border">
            <div class="panel-header tech-blue-header">
              <span class="panel-title-decoration"></span>
              <div class="panel-title">项目状态分布</div>
              <span class="panel-title-decoration"></span>
            </div>
            <div class="panel-content">
              <div class="status-distribution">
                <div class="ring-chart-container">
                  <dv-charts class="ring-chart" :option="ringOption" />
                  <div class="ring-center-text">
                    <div class="total-count">{{ totalProjects }}</div>
                    <div class="total-label">总项目数</div>
                  </div>
                </div>
                <div class="status-legend">
                  <!-- 只显示百分比大于0的状态项 -->
                  <div class="status-legend-item" 
                       v-for="(status, index) in projectStatus.filter(s => s.percentage > 0)" 
                       :key="index"
                       @mouseenter="highlightStatus(projectStatus.findIndex(s => s.name === status.name))"
                       @mouseleave="resetHighlight">
                    <div class="status-color" :class="status.class"></div>
                    <div class="status-text">{{ status.name }}: <span class="status-percentage">{{ status.percentage }}%</span></div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>

      <!-- 中部地图区 -->
      <div class="center-panel">
        <div class="panel-item" style="height: 100%;">
          <dv-border-box-8 class="panel-border tech-blue-border">
            <div class="panel-header tech-blue-header">
              <span class="panel-title-decoration"></span>
              <div class="panel-title">项目分布地图</div>
              <span class="panel-title-decoration"></span>
            </div>
            <div class="panel-content map-container">
              <!-- 替换DataV飞线图为ECharts地图 -->
              <div id="china-map" style="width:100%;height:100%;"></div>
              <!-- 加载状态 -->
              <div id="map-loading" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;display:none;">
                地图加载中...
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>

      <!-- 右侧数据面板 -->
      <div class="right-panel">
        <!-- 重点项目模块 -->
        <div class="panel-item">
          <dv-border-box-8 class="panel-border tech-blue-border">
            <div class="panel-header tech-blue-header">
              <span class="panel-title-decoration"></span>
              <div class="panel-title">重点项目</div>
              <span class="panel-title-decoration"></span>
            </div>
            <div class="panel-content">
              <div class="key-projects-container">
                <div class="key-projects-carousel"
                     @mouseenter="pauseProjectCarousel"
                     @mouseleave="resumeProjectCarousel">
                  <div class="key-project-card" 
                       v-for="(project, index) in keyProjects" 
                       :key="index"
                       :class="[`status-${project.statusClass}`, {'active': activeProject === index}]">
                    <div class="project-header">
                      <div class="project-name">{{ project.name }}</div>
                    </div>
                    <div class="project-info">
                      <div class="project-info-item">
                        <div class="info-label">项目类型:</div>
                        <div class="info-value">{{ project.type }}</div>
                      </div>
                      <div class="project-info-item">
                        <div class="info-label">完成时限:</div>
                        <div class="info-value">{{ project.deadline }}</div>
                      </div>
                      <div class="project-info-item">
                        <div class="info-label">阶段状态:</div>
                        <div class="info-value" :class="`status-text-${project.statusClass}`">{{ project.phase }} / {{ project.status }}</div>
                      </div>
                    </div>
                    <div class="project-progress">
                      <div class="progress-label">
                        <span>项目进度</span>
                        <span class="progress-percentage">{{ project.progress }}%</span>
                      </div>
                      <div class="progress-bar-container">
                        <div class="progress-bar" 
                             :style="{width: `${project.progress}%`}" 
                             :class="`progress-${project.statusClass}`"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="carousel-indicators">
                  <div class="indicator" 
                       v-for="(project, index) in keyProjects" 
                       :key="index"
                       :class="[{'active': activeProject === index}, `status-bg-${project.statusClass}`]"
                       @click="activeProject = index; pauseProjectCarousel()"></div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>

        <!-- 滞后项目预警模块 -->
        <div class="panel-item">
          <dv-border-box-8 class="panel-border tech-blue-border">
            <div class="panel-header tech-blue-header">
              <span class="panel-title-decoration"></span>
              <div class="panel-title">滞后项目预警</div>
              <span class="panel-title-decoration"></span>
            </div>
            <div class="panel-content">
              <div class="warning-projects-container">
                <div class="warning-header">
                  <div class="warning-header-item">项目名称</div>
                  <div class="warning-header-item">项目阶段</div>
                  <div class="warning-header-item">要求完成时限</div>
                </div>
                <div class="warning-list">
                  <div class="warning-item" 
                       v-for="(warning, index) in warningProjects" 
                       :key="index"
                       :class="`urgency-${warning.urgency}`">
                    <div class="warning-item-content">
                      <div class="warning-project-name">{{ warning.name }}</div>
                      <div class="warning-project-phase">{{ warning.phase }}</div>
                      <div class="warning-deadline">{{ warning.deadline }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'
import * as echarts from 'echarts' // 引入echarts
// 导入中国地图JSON数据
import chinaMap from '../utils/map/china.json'

export default {
  name: 'Dashboard',
  
  setup() {
    let timeInterval = null
    const currentTime = ref(new Date().toLocaleString())
    let mapChart = null  // 用于存储地图实例
    
    // 存储当前高亮的状态索引
    const highlightedStatus = ref(null)
    
    // 添加阶段映射关系常量
    const phaseMapping = {
      '前期': '前期阶段',
      '发包': '发包阶段',
      '施工': '施工阶段',
      '竣工': '竣工阶段',
      '撤项': '撤项阶段'
    }
    
    // 添加响应式数据状态
    const loading = ref(false)
    const projectStats = ref({
      total: 0,
      completed: 0,
      inProgress: 0,
      focus: 0
    })
    
    // 项目阶段分布改为响应式
    const projectPhases = ref([
      { name: '前期阶段', value: 0, percentage: 0, colors: ['rgba(41, 237, 146, 0.5)', 'rgba(41, 237, 146, 0.8)'] },
      { name: '发包阶段', value: 0, percentage: 0, colors: ['rgba(0, 194, 255, 0.5)', 'rgba(0, 194, 255, 0.8)'] },
      { name: '施工阶段', value: 0, percentage: 0, colors: ['rgba(255, 216, 77, 0.5)', 'rgba(255, 216, 77, 0.8)'] },
      { name: '竣工阶段', value: 0, percentage: 0, colors: ['rgba(255, 125, 125, 0.5)', 'rgba(255, 125, 125, 0.8)'] },
      { name: '撤项阶段', value: 0, percentage: 0, colors: ['rgba(149, 97, 255, 0.5)', 'rgba(149, 97, 255, 0.8)'] }
    ])
    
    // 项目状态分布改为响应式
    const projectStatus = ref([
      { name: '正常推进', percentage: 0, class: 'normal' },
      { name: '阶段性迟缓', percentage: 0, class: 'warning' },
      { name: '滞后', percentage: 0, class: 'danger' },
      { name: '其他', percentage: 0, class: 'other' }
    ])
    
    // 创建状态映射
    const statusMapping = {
      '正常推进': '正常推进',
      '正常进行': '正常推进', // 将"正常进行"映射到"正常推进"
      '阶段性迟缓': '阶段性迟缓',
      '滞后': '滞后',
      '其他': '其他'
    }
    
    // 添加获取项目统计数据的函数
    async function fetchProjectStats() {
      try {
        loading.value = true
        console.log('开始获取项目统计数据...')
        console.log('阶段映射关系:', phaseMapping) // 添加日志以确认映射关系
        
        const result = await window.api.database.getProjectStats()
        console.log('API返回原始数据:', result)
        
        if (result.success) {
          console.log('项目统计数据获取成功，开始处理数据...')
          
          // 更新项目总览数据
          projectStats.value = {
            total: result.data.totalProjects || 0,
            completed: result.data.completedProjects || 0,
            inProgress: result.data.inProgressProjects || 0,
            focus: Math.round(result.data.inProgressProjects * 0.3) || 0
          }
          console.log('项目总览数据更新完成:', projectStats.value)
          
          // 更新项目阶段分布
          if (result.data.phaseDistribution && result.data.phaseDistribution.length > 0) {
            console.log('开始处理阶段分布数据...')
            console.log('原始阶段分布数据:', result.data.phaseDistribution)
            
            // 计算总数（排除phase为null的数据）
            const validPhases = result.data.phaseDistribution.filter(item => {
              const isValid = item.phase !== null && phaseMapping[item.phase] !== undefined;
              if (!isValid) {
                console.log('发现无效阶段数据:', item);
              }
              return isValid;
            });
            
            const total = validPhases.reduce((sum, item) => sum + item.count, 0)
            console.log('有效阶段总数:', total)
            
            // 重置所有阶段的值
            projectPhases.value.forEach(phase => {
              phase.value = 0;
              phase.percentage = 0;
            });
            
            // 更新阶段分布数据
            validPhases.forEach(item => {
              console.log('处理阶段:', item.phase, '数量:', item.count)
              const phaseName = phaseMapping[item.phase]
              const phase = projectPhases.value.find(p => p.name === phaseName)
              if (phase) {
                phase.value = item.count
                phase.percentage = total > 0 ? parseFloat((item.count / total * 100).toFixed(1)) : 0
                console.log(`${phaseName} 更新后的值:`, { count: phase.value, percentage: phase.percentage })
              }
            })
            
            // 确保百分比总和为100%
            const totalPercentage = projectPhases.value.reduce((sum, phase) => sum + phase.percentage, 0)
            console.log('阶段分布百分比总和:', totalPercentage)
            
            if (totalPercentage !== 100 && totalPercentage > 0) {
              const maxPhase = projectPhases.value
                .filter(p => p.percentage > 0)
                .sort((a, b) => b.percentage - a.percentage)[0]
              if (maxPhase) {
                const oldPercentage = maxPhase.percentage
                maxPhase.percentage = parseFloat((maxPhase.percentage + (100 - totalPercentage)).toFixed(1))
                console.log(`调整最大阶段 ${maxPhase.name} 的百分比: ${oldPercentage} -> ${maxPhase.percentage}`)
              }
            }
          }
          
          // 更新项目状态分布
          if (result.data.statusDistribution && result.data.statusDistribution.length > 0) {
            console.log('开始处理状态分布数据...')
            console.log('原始状态分布数据:', result.data.statusDistribution)
            
            // 按照映射合并状态计数
            const mergedStatus = {}
            
            result.data.statusDistribution.forEach(item => {
              const mappedStatus = statusMapping[item.status] || '其他'
              mergedStatus[mappedStatus] = (mergedStatus[mappedStatus] || 0) + item.count
            })
            
            console.log('合并后的状态数据:', mergedStatus)
            
            // 计算总数
            const total = Object.values(mergedStatus).reduce((sum, count) => sum + count, 0)
            console.log('状态分布总数:', total)
            
            // 重置所有状态的百分比
            projectStatus.value.forEach(status => {
              status.percentage = 0;
              status.count = 0; // 重置count值
            });
            
            // 更新状态百分比
            for (const [statusName, count] of Object.entries(mergedStatus)) {
              console.log('处理状态:', statusName, '数量:', count)
              const status = projectStatus.value.find(s => s.name === statusName)
              
              if (status) {
                const oldPercentage = status.percentage
                status.count = count; // 设置count值
                status.percentage = total > 0 ? parseFloat((count / total * 100).toFixed(1)) : 0
                console.log(`${status.name} 百分比更新: ${oldPercentage} -> ${status.percentage}, 数量: ${status.count}`)
              }
            }
            
            // 确保百分比总和为100%
            const sum = projectStatus.value.reduce((total, status) => total + status.percentage, 0)
            console.log('状态分布百分比总和:', sum)
            
            if (Math.abs(sum - 100) > 0.01 && sum > 0) {
              // 找出非零百分比中最大的一项进行调整
              const maxItem = [...projectStatus.value]
                .filter(s => s.percentage > 0)
                .sort((a, b) => b.percentage - a.percentage)[0]
                
              if (maxItem) {
                const oldPercentage = maxItem.percentage
                maxItem.percentage = parseFloat((maxItem.percentage + (100 - sum)).toFixed(1))
                console.log(`调整最大状态 ${maxItem.name} 的百分比: ${oldPercentage} -> ${maxItem.percentage}`)
              }
            }
            
            console.log('最终状态分布数据:', projectStatus.value)
          }
          
        } else {
          console.error('获取项目统计数据失败:', result.error)
        }
      } catch (error) {
        console.error('调用项目统计接口出错:', error)
        console.error('错误堆栈:', error.stack)
      } finally {
        loading.value = false
        console.log('数据获取和处理完成')
      }
    }
    
    function updateTime() {
      currentTime.value = new Date().toLocaleString()
    }
    
    onMounted(() => {
      console.log('数据大屏页面已加载')
      updateTime()
      timeInterval = setInterval(updateTime, 1000)
      
      // 获取项目统计数据
      fetchProjectStats()
      
      // 设置定时刷新统计数据（每5分钟刷新一次）
      const statsInterval = setInterval(fetchProjectStats, 5 * 60 * 1000)
      
      // 延迟初始化地图，确保DOM已经完全渲染
      nextTick(() => {
        try {
          console.log('开始初始化地图')
          initMap()
        } catch (error) {
          console.error('地图初始化失败:', error)
          const loadingEl = document.getElementById('map-loading')
          if (loadingEl) {
            loadingEl.textContent = '地图加载失败，请刷新页面重试'
            loadingEl.style.display = 'block'
          }
        }
      })
      
      return () => {
        if (timeInterval) {
          clearInterval(timeInterval)
        }
        if (statsInterval) {
          clearInterval(statsInterval)
        }
      }
    })
    
    onBeforeUnmount(() => {
      if (timeInterval) {
        clearInterval(timeInterval)
      }
      // 销毁地图实例
      if (mapChart) {
        mapChart.dispose()
      }
    })
    
    // 初始化地图
    function initMap() {
      const chartDom = document.getElementById('china-map')
      if (!chartDom) return
      
      // 显示加载状态
      const loadingEl = document.getElementById('map-loading')
      if (loadingEl) loadingEl.style.display = 'block'
      
      mapChart = echarts.init(chartDom)
      
      try {
        // 直接使用导入的JSON数据注册地图
        echarts.registerMap('china', chinaMap)
        console.log('中国地图数据加载成功')
        
        // 隐藏加载状态
        if (loadingEl) loadingEl.style.display = 'none'
        
        // 检查地图注册状态
        console.log('中国地图注册状态：', echarts.getMap('china') ? '已注册' : '未注册')
        
        // 图标定义
        let iconRQ = "image://"
        
        // 项目点位数据
        let data = [
          { name: "四川省", value: [104.06, 30.67, 82], symbolSize: 10, itemStyle: { color: '#00c2ff' }, detail: {
            total: 82,
            cities: [
              { name: "成都", count: 58 },
              { name: "雅安", count: 7 },
              { name: "峨眉", count: 6 },
              { name: "宜宾", count: 3 },
              { name: "广元", count: 4 },
              { name: "乐山", count: 2 },
              { name: "阿坝", count: 1 },
              { name: "夹江", count: 1 }
            ]
          }},
          { name: "宁夏回族自治区", value: [106.27, 38.47, 15], symbolSize: 7, itemStyle: { color: '#00c2ff' }, detail: {
            total: 15,
            cities: [
              { name: "银川", count: 14 },
              { name: "吴忠", count: 1 }
            ]
          }},
          { name: "新疆维吾尔自治区", value: [87.68, 43.77, 5], symbolSize: 5, itemStyle: { color: '#ffcf56' }, detail: {
            total: 5,
            cities: [
              { name: "乌鲁木齐", count: 2 },
              { name: "奎屯", count: 2 },
              { name: "喀什", count: 1 }
            ]
          }},
          { name: "甘肃省", value: [103.83, 36.06, 47], symbolSize: 9, itemStyle: { color: '#ff7070' }, detail: {
            total: 47,
            cities: [
              { name: "兰州", count: 27 },
              { name: "武威", count: 7 },
              { name: "武山", count: 7 },
              { name: "天水", count: 1 },
              { name: "酒泉", count: 1 },
              { name: "定西", count: 1 },
              { name: "白银", count: 1 },
              { name: "陇西", count: 2 }
            ]
          }},
          { name: "西藏自治区", value: [91.11, 29.97, 7], symbolSize: 5, itemStyle: { color: '#ffcf56' }, detail: {
            total: 7,
            cities: [
              { name: "拉萨", count: 3 },
              { name: "日土", count: 2 },
              { name: "阿里", count: 1 },
              { name: "林芝", count: 1 }
            ]
          }},
          { name: "重庆市", value: [106.55, 29.56, 15], symbolSize: 7, itemStyle: { color: '#00c2ff' }, detail: {
            total: 15,
            cities: [
              { name: "渝中区", count: 3 },
              { name: "南岸区", count: 4 },
              { name: "巴南区", count: 1 },
              { name: "九龙坡区", count: 1 },
              { name: "南川区", count: 2 },
              { name: "江津区", count: 1 },
              { name: "两江新区", count: 1 },
              { name: "其他区域", count: 2 }
            ]
          }},
          { name: "青海省", value: [101.74, 36.56, 27], symbolSize: 8, itemStyle: { color: '#ff7070' }, detail: {
            total: 27,
            cities: [
              { name: "西宁", count: 26 },
              { name: "格尔木", count: 1 }
            ]
          }}
        ]
        
        // 创建详情弹窗元素
        const detailPopup = document.createElement('div')
        detailPopup.className = 'map-detail-popup'
        detailPopup.style.display = 'none'
        detailPopup.innerHTML = `
          <div class="popup-header">
            <span class="popup-title">省份项目详情</span>
            <span class="popup-close">×</span>
          </div>
          <div class="popup-content">
            <div class="province-info">
              <span class="province-name"></span>
              <span class="project-total"></span>
            </div>
            <div class="city-list"></div>
          </div>
        `
        document.querySelector('.map-container').appendChild(detailPopup)
        
        // 关闭弹窗事件
        detailPopup.querySelector('.popup-close').addEventListener('click', () => {
          detailPopup.style.display = 'none'
        })
        
        // 显示省份详情
        const showProvinceDetail = (province) => {
          const detail = province.detail
          if (!detail) return
          
          // 设置弹窗内容
          detailPopup.querySelector('.province-name').textContent = province.name
          detailPopup.querySelector('.project-total').textContent = `共${detail.total}个项目`
          
          // 生成城市列表HTML
          const cityListHtml = detail.cities.map(city => 
            `<div class="city-item">
               <span class="city-name">${city.name}</span>
               <span class="city-count">${city.count}个项目</span>
             </div>`
          ).join('')
          
          // 更新城市列表
          detailPopup.querySelector('.city-list').innerHTML = cityListHtml
          
          // 显示弹窗
          detailPopup.style.display = 'block'
          
          // 定位弹窗到鼠标位置或固定位置
          const mapContainer = document.querySelector('.map-container')
          detailPopup.style.left = '20px'
          detailPopup.style.top = '60px'
        }
        
        // 地图配置
        const option = {
          geo: {
            map: 'china',
            aspectScale: 0.85,
            layoutCenter: ["50%", "50%"],
            layoutSize: '100%',
            itemStyle: {
              normal: {
                shadowColor: '#276fce',
                shadowOffsetX: 0,
                shadowOffsetY: 15,
                opacity: 0.5,
              },
              emphasis: {
                areaColor: '#276fce'
              }
            },
            regions: [{
              name: '南海诸岛',
              itemStyle: {
                areaColor: 'rgba(0, 10, 52, 1)',
                borderColor: 'rgba(0, 10, 52, 1)',
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  }
                },
              },
              label: {
                show: false,
                color: '#FFFFFF',
                fontSize: 12,
              },
            }],
          },
          series: [
            // 常规地图
            {
              type: 'map',
              mapType: 'china',
              aspectScale: 0.85,
              layoutCenter: ["50%", "50%"],
              layoutSize: '100%',
              zoom: 1, // 当前视角的缩放比例
              scaleLimit: { // 滚轮缩放的极限控制
                min: 1,
                max: 2
              },
              itemStyle: {
                normal: {
                  areaColor: '#0c274b',
                  borderColor: '#1cccff',
                  borderWidth: 1.5
                },
                emphasis: {
                  areaColor: '#02102b',
                  label: {
                    color: "#fff"
                  }
                }
              },
            },
            // 首都星图标
            {
              name: '首都',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: [{
                name: '首都',
                value: [116.24, 41.55, 100],
              }],
              symbol: iconRQ,
              symbolSize: 20,
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false
                }
              },
            },
            // 项目点位散点图
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              symbolSize: (val) => {
                return val[2] ? val[2] / 15 : 8
              },
              rippleEffect: { // 坐标点动画
                period: 3,
                scale: 5,
                brushType: 'fill'
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  formatter: '{b}',
                  color: '#b3e2f2',
                  fontWeight: "bold",
                  fontSize: 14
                }
              },
              data: data,
              itemStyle: { // 坐标点颜色
                normal: {
                  show: true,
                  shadowBlur: 20,
                  shadowColor: '#fff'
                },
                emphasis: {
                  areaColor: '#f00'
                }
              },
            }
          ]
        }
        
        // 设置地图配置
        mapChart.setOption(option)
        
        // 添加点击事件
        mapChart.on('click', function(params) {
          // 检查点击的是否是散点
          if (params.componentType === 'series' && params.seriesType === 'effectScatter') {
            const province = data.find(item => item.name === params.name)
            if (province) {
              showProvinceDetail(province)
            }
          }
        })
        
        // 窗口大小变化时自动调整地图大小
        window.addEventListener('resize', function() {
          mapChart.resize()
        })
      } catch (error) {
        console.error('地图数据注册失败', error)
        if (loadingEl) loadingEl.textContent = '地图数据加载失败，请刷新页面重试'
      }
    }
    
    // 地图重新加载后的初始化函数
    function initMapAfterReload() {
      if (!mapChart) return
      
      // 再次检查地图注册状态
      console.log('重新加载后中国地图注册状态：', echarts.getMap('china') ? '已注册' : '未注册')
      
      // 初始化地图
      initMap()
    }
    
    // 处理地图点位点击事件
    function handleMapPointClick(name) {
      console.log(`地图点位${name}被点击`)
      // TODO: 实现点击后的业务逻辑
    }
    
    // 数字翻牌器配置
    const digitalFlopConfig = (number, color) => {
      return {
        number: [number],
        content: '{nt}',
        style: {
          fontSize: 32,
          fill: color,
          fontWeight: 'bold'
        },
        animationCurve: 'easeOutCubic',
        animationFrame: 50
      }
    }
    
    // 添加项目状态数据变化的监听
    watch(projectStatus, () => {
      console.log('项目状态数据已更新，环形图将重新渲染');
      nextTick(() => {
        // 环形图组件可能需要一些额外的刷新操作
        const ringChart = document.querySelector('.ring-chart');
        if (ringChart) {
          const event = new Event('resize');
          window.dispatchEvent(event);
        }
      });
    }, { deep: true });
    
    return {
      currentTime,
      loading,
      projectStats,
      projectPhases,
      projectStatus,
      phaseMapping,
      statusMapping,
      highlightedStatus,
      digitalFlopConfig,
      handleMapPointClick,
      // 添加刷新方法以便UI上可以手动刷新
      refreshStats: fetchProjectStats,
    }
  },
  
  data() {
    return {
      // 飞线图配置数据
      flylineConfig: {
        bgImgSrc: '/map-bg.png', // 中国地图背景图URL
        points: [
          {
            name: '北京指挥中心',
            coordinate: [0.45, 0.25],
            halo: {
              show: true,
              color: '#00c2ff',
            },
            icon: {
              show: true,
              src: '',
              width: 10,
              height: 10,
            },
            text: {
              show: true,
              fontSize: 12,
              color: '#ffffff',
            }
          },
          {
            name: '上海训练基地',
            coordinate: [0.60, 0.35],
            halo: {
              show: true,
              color: '#00c2ff',
            },
          },
          {
            name: '广州后勤中心',
            coordinate: [0.55, 0.60],
            halo: {
              show: true,
              color: '#ff7070',
            }
          },
          {
            name: '成都装备库',
            coordinate: [0.30, 0.47],
            halo: {
              show: true,
              color: '#ffcf56',
            }
          },
          {
            name: '西安基地',
            coordinate: [0.38, 0.35],
            halo: {
              show: true,
              color: '#ffcf56',
            }
          },
          {
            name: '武汉仓库',
            coordinate: [0.48, 0.47],
            halo: {
              show: true,
              color: '#ffcf56',
            }
          },
          {
            name: '南京指挥部',
            coordinate: [0.55, 0.40],
          },
          {
            name: '长春物资库',
            coordinate: [0.58, 0.22],
          },
          {
            name: '济南训练场',
            coordinate: [0.52, 0.35],
          },
          {
            name: '太原装备站',
            coordinate: [0.42, 0.32],
          },
          {
            name: '兰州维修基地',
            coordinate: [0.28, 0.37],
          },
          {
            name: '呼和浩特指挥站',
            coordinate: [0.40, 0.25],
          },
          {
            name: '乌鲁木齐基地',
            coordinate: [0.18, 0.22],
          },
          {
            name: '哈尔滨仓储中心',
            coordinate: [0.62, 0.15],
          },
          {
            name: '昆明训练场',
            coordinate: [0.35, 0.60],
          },
          {
            name: '贵阳指挥所',
            coordinate: [0.40, 0.55],
            halo: {
              show: true,
              color: '#ff7070',
            }
          },
          {
            name: '海口物资库',
            coordinate: [0.48, 0.70],
          },
          {
            name: '南宁装备中心',
            coordinate: [0.42, 0.65],
            halo: {
              show: true,
              color: '#ffcf56',
            }
          },
        ],
        lines: [
          // 以北京为中心的连线
          { source: '上海训练基地', target: '北京指挥中心' },
          { source: '广州后勤中心', target: '北京指挥中心', color: '#ff7070', width: 2 },
          { source: '成都装备库', target: '北京指挥中心', color: '#ffcf56', width: 1.5 },
          { source: '西安基地', target: '北京指挥中心', color: '#ffcf56', width: 1.5 },
          { source: '济南训练场', target: '北京指挥中心' },
          { source: '太原装备站', target: '北京指挥中心' },
          { source: '兰州维修基地', target: '北京指挥中心' },
          { source: '呼和浩特指挥站', target: '北京指挥中心' },
          { source: '乌鲁木齐基地', target: '北京指挥中心' },
          { source: '哈尔滨仓储中心', target: '北京指挥中心' },
          
          // 区域性连线
          { source: '广州后勤中心', target: '南宁装备中心', color: '#ff7070' },
          { source: '广州后勤中心', target: '海口物资库' },
          { source: '贵阳指挥所', target: '成都装备库', color: '#ff7070' },
          { source: '贵阳指挥所', target: '南宁装备中心', color: '#ff7070' },
          { source: '昆明训练场', target: '成都装备库' },
          { source: '西安基地', target: '兰州维修基地', color: '#ffcf56' },
          { source: '上海训练基地', target: '南京指挥部' },
          { source: '上海训练基地', target: '武汉仓库', color: '#ffcf56' },
          { source: '济南训练场', target: '长春物资库' },
        ],
        tooltip: {
          show: true,
          formatter: '{name}'
        },
        k: 0.5,
        curvature: 5,
        lineWidth: 1,
        lineColor: 'rgba(0, 194, 255, 0.5)',
        halo: {
          show: true,
          color: '#00c2ff',
          duration: [20, 30],
          radius: 100
        },
        text: {
          show: true,
          offset: [0, 15],
          color: '#ffffff',
          fontSize: 12
        },
        icon: {
          show: true,
          src: '',
          width: 8,
          height: 8
        }
      },
      
      // 原地图配置数据（保留做参考）
      mapConfig: {
        showPoints: true,
        pointMerge: false,
        pointsSize: 2.5,
        pointsFill: {
          type: 'multiple',
          colors: ['#00c2ff', '#ffcf56', '#ff7070']
        },
        areaColor: 'rgba(0, 30, 60, 0.8)',
        areaHoverColor: 'rgba(0, 194, 255, 0.4)',
        lineColor: 'rgba(0, 194, 255, 0.3)',
        lineHoverColor: 'rgba(0, 194, 255, 0.8)',
        lineWidth: 0.5,
        focusArea: '',
        k: 1.2,
        bgImgSrc: '',
        points: [
          { name: '北京指挥中心', coordinate: [116.4, 39.9], value: [75, 0], symbolSize: 6 }, // 正常
          { name: '上海训练基地', coordinate: [121.4, 31.2], value: [45, 0], symbolSize: 5 }, // 正常
          { name: '广州后勤中心', coordinate: [113.2, 23.1], value: [60, 2], symbolSize: 6 }, // 滞后
          { name: '成都装备库', coordinate: [104.0, 30.6], value: [85, 1], symbolSize: 5 }, // 迟缓
          { name: '西安基地', coordinate: [108.9, 34.2], value: [40, 1], symbolSize: 5 }, // 迟缓
          { name: '武汉仓库', coordinate: [114.3, 30.6], value: [65, 1], symbolSize: 5 }, // 迟缓
          { name: '南京指挥部', coordinate: [118.8, 32.0], value: [50, 0], symbolSize: 4 }, // 正常
          { name: '长春物资库', coordinate: [125.3, 43.8], value: [30, 0], symbolSize: 4 }, // 正常
          { name: '济南训练场', coordinate: [117.0, 36.6], value: [25, 0], symbolSize: 4 }, // 正常
          { name: '太原装备站', coordinate: [112.5, 37.8], value: [15, 0], symbolSize: 3 }, // 正常
          { name: '兰州维修基地', coordinate: [103.8, 36.0], value: [20, 0], symbolSize: 4 }, // 正常
          { name: '呼和浩特指挥站', coordinate: [111.6, 40.8], value: [35, 0], symbolSize: 4 }, // 正常
          { name: '乌鲁木齐基地', coordinate: [87.6, 43.8], value: [40, 0], symbolSize: 4 }, // 正常
          { name: '哈尔滨仓储中心', coordinate: [126.5, 45.8], value: [55, 0], symbolSize: 5 }, // 正常
          { name: '昆明训练场', coordinate: [102.7, 25.0], value: [30, 0], symbolSize: 4 }, // 正常
          { name: '贵阳指挥所', coordinate: [106.7, 26.6], value: [25, 2], symbolSize: 4 }, // 滞后
          { name: '海口物资库', coordinate: [110.3, 20.0], value: [35, 0], symbolSize: 4 }, // 正常
          { name: '南宁装备中心', coordinate: [108.3, 22.8], value: [40, 1], symbolSize: 5 }  // 迟缓
        ],
        areas: [
          { name: '北京', value: 23 },
          { name: '天津', value: 12 },
          { name: '河北', value: 15 },
          { name: '山西', value: 8 },
          { name: '内蒙古', value: 9 },
          { name: '辽宁', value: 12 },
          { name: '吉林', value: 8 },
          { name: '黑龙江', value: 10 },
          { name: '上海', value: 18 },
          { name: '江苏', value: 20 },
          { name: '浙江', value: 16 },
          { name: '安徽', value: 8 },
          { name: '福建', value: 12 },
          { name: '江西', value: 7 },
          { name: '山东', value: 14 },
          { name: '河南', value: 13 },
          { name: '湖北', value: 11 },
          { name: '湖南', value: 9 },
          { name: '广东', value: 25 },
          { name: '广西', value: 8 },
          { name: '海南', value: 5 },
          { name: '重庆', value: 10 },
          { name: '四川', value: 20 },
          { name: '贵州', value: 6 },
          { name: '云南', value: 8 },
          { name: '西藏', value: 3 },
          { name: '陕西', value: 12 },
          { name: '甘肃', value: 7 },
          { name: '青海', value: 3 },
          { name: '宁夏', value: 4 },
          { name: '新疆', value: 8 }
        ],
        tooltip: {
          show: true,
          formatter: '{name}：{value}个项目'
        }
      },
      
      // 重点项目数据
      keyProjects: [
        { 
          name: '四川成都综合训练基地', 
          type: '十四五',
          phase: '施工阶段', 
          status: '正常推进', 
          statusClass: 'normal',
          department: '成都军区工程部',
          progress: 75,
          deadline: '2024-06-30',
          timelinePosition: 70
        },
        { 
          name: '甘肃兰州指挥中心', 
          type: '十四五',
          phase: '发包阶段', 
          status: '正常推进', 
          statusClass: 'normal',
          department: '西部战区基建处',
          progress: 45,
          deadline: '2024-10-15',
          timelinePosition: 30
        },
        { 
          name: '青海西宁后勤基地', 
          type: '十三五',
          phase: '施工阶段', 
          status: '滞后', 
          statusClass: 'danger',
          department: '青海军区工程局',
          progress: 60,
          deadline: '2023-12-30',
          timelinePosition: 55
        },
        { 
          name: '西藏拉萨训练场', 
          type: '十三五',
          phase: '竣工阶段', 
          status: '阶段性迟缓', 
          statusClass: 'warning',
          department: '西藏军区装备部',
          progress: 85,
          deadline: '2024-02-28',
          timelinePosition: 90
        }
      ],
      
      // 滞后项目预警数据
      warningProjects: [
        { 
          name: '青海西宁后勤基地', 
          phase: '施工阶段', 
          reason: '材料运输困难', 
          urgency: 'high',
          urgencyLabel: '高',
          urgencyValue: 90,
          deadline: '2023-12-30',
          delayDays: 15
        },
        { 
          name: '西藏日土边防站', 
          phase: '前期阶段', 
          reason: '地质条件复杂',
          urgency: 'medium',
          urgencyLabel: '中',
          urgencyValue: 65,
          deadline: '2024-03-15',
          delayDays: 10
        },
        { 
          name: '甘肃武威仓储基地', 
          phase: '竣工阶段', 
          reason: '验收标准变更',
          urgency: 'medium',
          urgencyLabel: '中',
          urgencyValue: 55,
          deadline: '2024-02-28',
          delayDays: 5
        },
        { 
          name: '四川广元训练场',
          phase: '施工阶段',
          reason: '天气因素影响',
          urgency: 'low',
          urgencyLabel: '低',
          urgencyValue: 35,
          deadline: '2024-05-10',
          delayDays: 3
        }
      ],
      highlightedStatus: -1,
      activeProject: 0,
      projectCarouselInterval: null,
      mapUpdateInterval: null,
      selectedArea: '',
      selectedPoint: ''
    }
  },
  
  mounted() {
    // 启动重点项目自动轮播
    this.startProjectCarousel();
    // 初始化地图数据
    this.updateMapData();
    // 启动地图数据定时更新
    this.startMapUpdate();
  },
  
  beforeUnmount() {
    // 清除轮播定时器
    this.stopProjectCarousel();
    // 清除地图更新定时器
    this.stopMapUpdate();
  },
  
  computed: {
    // 状态图表样式
    statusChartStyle() {
      return {
        background: `conic-gradient(
          #4a7c44 0% ${this.projectStatus[0].percentage}%, 
          #c4b454 ${this.projectStatus[0].percentage}% ${this.projectStatus[0].percentage + this.projectStatus[1].percentage}%, 
          #a34c3a ${this.projectStatus[0].percentage + this.projectStatus[1].percentage}% 100%
        )`
      }
    },
    
    // 项目统计数字翻牌器配置
    projectTotalConfig() {
      return {
        number: [this.projectStats.total],
        content: '{nt}',
        toFixed: 0,
        textAlign: 'center',
        style: {
          fontSize: 36,
          fill: '#00c2ff',
          fontWeight: 'bold'
        },
        animationCurve: 'easeOutCubic',
        animationFrame: 50
      }
    },
    
    projectCompletedConfig() {
      return {
        number: [this.projectStats.completed],
        content: '{nt}',
        toFixed: 0,
        textAlign: 'center',
        style: {
          fontSize: 36,
          fill: '#29ed92',
          fontWeight: 'bold'
        },
        animationCurve: 'easeOutCubic',
        animationFrame: 50
      }
    },
    
    projectInProgressConfig() {
      return {
        number: [this.projectStats.inProgress],
        content: '{nt}',
        toFixed: 0,
        textAlign: 'center',
        style: {
          fontSize: 36,
          fill: '#ffd84d',
          fontWeight: 'bold'
        },
        animationCurve: 'easeOutCubic',
        animationFrame: 50
      }
    },
    
    projectFocusConfig() {
      return {
        number: [this.projectStats.focus],
        content: '{nt}',
        toFixed: 0,
        textAlign: 'center',
        style: {
          fontSize: 36,
          fill: '#ff7474',
          fontWeight: 'bold'
        },
        animationCurve: 'easeOutCubic',
        animationFrame: 50
      }
    },
    
    ringOption() {
      // 确保颜色数组包含所有状态的颜色
      const colors = ['#00c2ff', '#ffcf56', '#ff7070', '#8e8e8e']; // 包含"其他"状态的颜色
      const highlightColors = ['#20e2ff', '#ffdf66', '#ff9090', '#aeaeae']; // 包含"其他"状态的高亮颜色
      
      // 过滤出有数据的状态
      const validStatus = this.projectStatus.filter(status => status.percentage > 0);
      
      return {
        series: [
          {
            type: 'pie',
            radius: ['42%', '70%'],
            data: validStatus.map((status, index) => {
              const originalIndex = this.projectStatus.findIndex(s => s.name === status.name);
              return {
                name: status.name,
                value: status.percentage,
                itemStyle: {
                  color: this.highlightedStatus === originalIndex ? 
                    highlightColors[originalIndex] : 
                    colors[originalIndex]
                }
              };
            }),
            insideLabel: {
              show: true,
              formatter: '{value}%',
              style: {
                fontSize: 14,
                fill: '#fff',
                textAlign: 'center',
                textShadow: '0 0 3px rgba(0, 0, 0, 0.5)'
              }
            },
            outsideLabel: {
              show: false
            },
            roseType: false,
            arcGap: 4,
            lineDash: [2, 0],
            lineWidth: 1,
            animationCurve: 'easeOutCubic',
            animationFrames: 60
          }
        ],
        color: colors
      }
    },
    
    keyProjectsConfig() {
      return {
        header: ['项目名称', '阶段', '状态'],
        data: this.keyProjects.map(project => [
          project.name, 
          project.phase, 
          project.status
        ]),
        rowNum: 4,
        headerBGC: 'rgba(0, 85, 120, 0.6)',
        oddRowBGC: 'rgba(0, 30, 60, 0.3)',
        evenRowBGC: 'rgba(0, 30, 60, 0.5)',
        headerHeight: 35,
        columnWidth: [180, 100, 100],
        align: ['left', 'center', 'center'],
        index: true,
        indexHeader: '序号',
        carousel: 'single',
        hoverPause: true
      }
    },
    
    warningProjectsConfig() {
      return {
        header: ['项目名称', '项目阶段', '要求完成时限'],
        data: this.warningProjects.map(warning => [
          warning.name, 
          warning.phase, 
          warning.deadline
        ]),
        rowNum: 5,
        headerBGC: 'rgba(0, 85, 120, 0.6)',
        oddRowBGC: 'rgba(0, 30, 60, 0.3)',
        evenRowBGC: 'rgba(0, 30, 60, 0.5)',
        headerHeight: 35,
        columnWidth: [150, 100, 180],
        align: ['left', 'center', 'left'],
        index: true,
        indexHeader: '序号',
        carousel: 'single',
        hoverPause: true
      }
    },
    totalProjects() {
      console.log('计算总项目数:', this.projectStats.total);
      return this.projectStats.total || 0; // 确保返回0而不是undefined
    }
  },
  methods: {
    // 突出显示特定状态
    highlightStatus(index) {
      console.log(`高亮状态索引: ${index}`);
      this.highlightedStatus = index;
    },
    
    // 重置突出显示
    resetHighlight() {
      console.log('重置高亮');
      this.highlightedStatus = null;
    },
    // 启动重点项目自动轮播
    startProjectCarousel() {
      this.stopProjectCarousel(); // 确保先清除可能存在的定时器
      this.projectCarouselInterval = setInterval(() => {
        this.activeProject = (this.activeProject + 1) % this.keyProjects.length;
      }, 5000); // 每5秒切换一次
    },
    // 停止轮播
    stopProjectCarousel() {
      if (this.projectCarouselInterval) {
        clearInterval(this.projectCarouselInterval);
        this.projectCarouselInterval = null;
      }
    },
    // 鼠标进入时暂停轮播
    pauseProjectCarousel() {
      this.stopProjectCarousel();
    },
    // 鼠标离开时继续轮播
    resumeProjectCarousel() {
      this.startProjectCarousel();
    },
    handleMapClick(params) {
      console.log('飞线图点击事件:', params);
      
      // 处理点击事件
      if (params.name) {
        // 点击项目点位
        const pointName = params.name;
        console.log('点击项目:', pointName);
        
        // 找到对应的重点项目并显示
        const keyProjectIndex = this.keyProjects.findIndex(p => p.name === pointName);
        if (keyProjectIndex >= 0) {
          this.activeProject = keyProjectIndex;
          this.pauseProjectCarousel();
        }
        
        // 添加高亮效果逻辑
        this.flylineConfig.points.forEach(point => {
          // 重置所有点的大小
          if (point.icon && point.icon.show) {
            point.icon.width = 8;
            point.icon.height = 8;
          }
          
          // 高亮选中的点
          if (point.name === pointName) {
            if (point.icon && point.icon.show) {
              point.icon.width = 12;
              point.icon.height = 12;
            }
            
            // 记录选中的点
            this.selectedPoint = pointName;
          }
        });
        
        // 更新飞线图数据以应用更改
        this.flylineConfig = { ...this.flylineConfig };
      }
    },
    // 添加地图数据更新方法
    updateMapData() {
      // 生成动态的飞线数据
      // 根据项目状态更新点的样式
      this.flylineConfig.points.forEach(point => {
        // 查找对应的项目数据
        const keyProject = this.keyProjects.find(p => p.name === point.name);
        if (keyProject) {
          // 根据项目状态设置点的颜色
          if (point.halo && point.halo.show) {
            if (keyProject.statusClass === 'danger') {
              point.halo.color = '#ff7070';
            } else if (keyProject.statusClass === 'warning') {
              point.halo.color = '#ffcf56';
            } else {
              point.halo.color = '#00c2ff';
            }
          }
          
          // 根据项目进度设置点的大小
          if (point.icon && point.icon.show) {
            point.icon.width = 6 + (keyProject.progress / 20);
            point.icon.height = 6 + (keyProject.progress / 20);
          }
        }
      });
      
      // 更新连线颜色
      this.flylineConfig.lines.forEach(line => {
        // 查找连线对应的源项目
        const sourceProject = this.keyProjects.find(p => p.name === line.source);
        if (sourceProject) {
          // 根据项目状态设置线的颜色
          if (sourceProject.statusClass === 'danger') {
            line.color = '#ff7070';
            line.width = 2;
          } else if (sourceProject.statusClass === 'warning') {
            line.color = '#ffcf56';
            line.width = 1.5;
          } else {
            delete line.color; // 使用默认颜色
            delete line.width; // 使用默认宽度
          }
        }
      });
    },
    
    // 启动地图数据定时更新
    startMapUpdate() {
      this.stopMapUpdate(); // 先清除可能存在的定时器
      
      this.mapUpdateInterval = setInterval(() => {
        // 随机选择一些连线添加动画效果
        this.flylineConfig.lines.forEach(line => {
          // 随机决定是否显示动画
          line.orbitColor = Math.random() > 0.7 ? 
            'rgba(0, 194, 255, 0.5)' : // 70%概率没有动画
            'rgba(0, 194, 255, 0.8)';  // 30%概率有动画
          
          // 随机调整曲率，增加动态效果
          if (Math.random() > 0.8) {
            line.curvature = 4 + Math.random() * 2;
          }
        });
        
        // 随机闪烁部分点的光晕效果
        this.flylineConfig.points.forEach(point => {
          if (point.halo && point.halo.show && Math.random() > 0.7) {
            const originalRadius = point.halo.radius || 100;
            point.halo.radius = originalRadius + (Math.random() * 20 - 10);
          }
        });
        
        // 更新飞线图数据以应用更改
        this.flylineConfig = { ...this.flylineConfig };
      }, 3000); // 每3秒更新一次
    },
    
    // 停止地图数据更新
    stopMapUpdate() {
      if (this.mapUpdateInterval) {
        clearInterval(this.mapUpdateInterval);
        this.mapUpdateInterval = null;
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", sans-serif;
  background-color: #1a2c17;
  color: #e6e6e6;
  overflow: hidden;
}

.dashboard-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #001628;
  background-image: radial-gradient(circle at center, rgba(0, 40, 70, 0.3) 0%, rgba(0, 15, 30, 0.9) 100%);
}

.top-decoration {
  width: 100%;
  height: 5px;
  background-color: #4a6b47;
  position: relative;
  z-index: 10;
}

.header {
  height: 10vh;
  min-height: 60px;
  max-height: 90px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background-color: rgba(0, 21, 41, 0.5);
  z-index: 5;
  padding: 0 2%;
  border-bottom: 1px solid rgba(0, 194, 255, 0.2);
}

.title-box {
  flex: 1;
  height: 90%;
  margin: 0 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  position: relative;
  height: 80%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-text {
  font-size: min(3.6vw, 36px);
  font-weight: bold;
  background: linear-gradient(to bottom, #ffffff, #98ffb3);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 15px rgba(152, 255, 179, 0.7);
  letter-spacing: min(0.4vw, 4px);
  padding: 0 2%;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  animation: titlePulse 2s infinite ease-in-out;
}

@keyframes titlePulse {
  0%, 100% {
    text-shadow: 0 0 15px rgba(152, 255, 179, 0.7);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 20px rgba(152, 255, 179, 0.9);
    transform: scale(1.02);
  }
}

.time-box {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: min(200px, 20%);
  height: 40px;
}

.header-time {
  font-size: clamp(12px, 1.6vw, 16px);
  color: #7ec699;
  text-align: center;
  line-height: 40px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
  height: calc(100vh - 10vh - 5px);
  background-color: rgba(0, 22, 40, 0.7);
}

.left-panel {
  width: 22%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.center-panel {
  width: 56%;
  height: 100%;
  flex-shrink: 0;
  padding: 0 10px;
}

.right-panel {
  width: 22%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
  padding-right: 10px;
}

.panel-item {
  width: 100%;
  position: relative;
  flex: 1;
  overflow: hidden;
  margin-bottom: 10px;
}

.left-panel .panel-item:nth-child(1) {
  height: 20%;
}

.left-panel .panel-item:nth-child(2) {
  height: 35%;
}

.left-panel .panel-item:nth-child(3) {
  height: 45%;
}

.right-panel .panel-item {
  height: 49%;
}

.panel-border {
  width: 100%;
  height: 100%;
  padding: 1px;
}

.tech-blue-border {
  --border-color: rgba(0, 194, 255, 0.6);
  --border-width: 2px;
  --box-color: rgba(0, 30, 60, 0.7);
}

.panel-header {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  background-color: rgba(0, 48, 87, 0.7);
  border-bottom: 1px solid rgba(0, 194, 255, 0.3);
}

.panel-content {
  height: calc(100% - 36px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.right-panel .panel-content {
  padding: 10px 5px 10px 10px;
}

.tech-blue-content {
  background-color: rgba(0, 30, 60, 0.8);
  border: 1px solid rgba(0, 194, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 194, 255, 0.2);
}

.stats-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
  gap: 4px;
}

.stat-card {
  width: 48%;
  height: 48%;
  position: relative;
}

.stat-border {
  width: 100%;
  height: 100%;
  padding: 2px;
}

.tech-blue-header {
  background-color: rgba(0, 48, 87, 0.7);
  border-bottom: 1px solid rgba(0, 194, 255, 0.3);
}

.panel-title-decoration {
  width: 30px;
  height: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #00c2ff, rgba(255, 255, 255, 0));
  margin: 0 10px;
}

.panel-title {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 2px;
  text-shadow: 0 0 5px #00c2ff;
}

.stat-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 4px;
  position: relative;
}

.stat-content:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0, 194, 255, 0.15), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 控制数字翻牌器的容器 */
.stat-content :deep(.dv-digital-flop) {
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
}

.stat-label {
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
  margin-top: 5px;
  position: relative;
  z-index: 1;
  letter-spacing: 1px;
  padding-top: 2px;
  border-top: 1px dashed rgba(0, 194, 255, 0.3);
  width: 80%;
  text-align: center;
}

/* 媒体查询中添加响应式调整 */
@media screen and (max-width: 1600px) {
  .stat-content :deep(.dv-digital-flop) {
    height: 60%;
  }
  
  .stat-label {
    font-size: 13px;
  }
}

@media screen and (max-width: 1366px) {
  .stat-content :deep(.dv-digital-flop) {
    height: 55%;
  }
  
  .stat-label {
    font-size: 12px;
    margin-top: 3px;
  }
}

.tech-title {
  background: linear-gradient(to bottom, #ffffff, #00c2ff);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 15px rgba(0, 194, 255, 0.7);
}

.tech-decoration {
  --deg: 45deg;
  --color: rgba(0, 194, 255, 0.5);
  width: 90%;
  height: 8px;
  position: absolute;
}

.header-decoration {
  --color: rgba(0, 194, 255, 0.5);
  height: 60%;
}

.left-decoration, .right-decoration {
  width: min(250px, 15%);
  max-width: 250px;
}

.right-decoration {
  transform: rotate(180deg);
}

.top-decoration {
  top: 0;
}

.bottom-decoration {
  bottom: 0;
  transform: rotate(180deg);
}

.phase-distribution {
  width: 100%;
  padding: 10px;
}

.phase-item {
  display: grid;
  grid-template-columns: 10px 100px 1fr 40px 50px;
  align-items: center;
  margin-bottom: 15px;
  grid-gap: 10px;
}

.phase-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.phase-name {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}

.phase-bar-container {
  height: 30px;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.phase-bar-container :deep(.dv-percent-pond) {
  width: 100%;
  height: 100%;
}

.phase-value {
  font-size: 14px;
  color: #29ed92;
  text-align: right;
  font-weight: bold;
}

.phase-percentage {
  font-size: 14px;
  color: #00c2ff;
  text-align: right;
  font-weight: bold;
}

.phase-type-0 .phase-indicator {
  background: #29ed92;
}

.phase-type-1 .phase-indicator {
  background: #00c2ff;
}

.phase-type-2 .phase-indicator {
  background: #ffd84d;
}

.phase-type-3 .phase-indicator {
  background: #ff7d7d;
}

.phase-type-4 .phase-indicator {
  background: #9561ff;
}

.status-distribution {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}

.ring-chart-container {
  position: relative;
  height: 240px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.ring-chart-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(0, 194, 255, 0.1) 0%, rgba(0, 30, 60, 0) 70%);
  border-radius: 50%;
  z-index: 0;
  filter: blur(8px);
}

.ring-chart {
  height: 240px;
  width: 100%;
  position: relative;
  filter: drop-shadow(0 0 8px rgba(0, 194, 255, 0.3));
}

.ring-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(0, 60, 120, 0.4) 0%, rgba(0, 30, 60, 0) 80%);
  border-radius: 50%;
}

.total-count {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 194, 255, 0.8);
  margin-bottom: 2px;
}

.total-label {
  font-size: 12px;
  color: #a0e0ff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.status-legend {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: 0 15px;
  margin-top: 5px;
  border-top: 1px solid rgba(0, 194, 255, 0.2);
  padding-top: 8px;
}

.status-legend-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(0, 30, 60, 0.4);
  margin: 0 3px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 194, 255, 0.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.status-legend-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background: rgba(0, 45, 90, 0.6);
  border: 1px solid rgba(0, 194, 255, 0.3);
}

.status-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 6px;
}

.status-color.normal {
  background: linear-gradient(45deg, #00c2ff, #20e2ff);
  box-shadow: 0 0 5px rgba(0, 194, 255, 0.8);
}

.status-color.warning {
  background: linear-gradient(45deg, #ffcf56, #ffdf66);
  box-shadow: 0 0 5px rgba(255, 207, 86, 0.8);
}

.status-color.danger {
  background: linear-gradient(45deg, #ff7070, #ff9090);
  box-shadow: 0 0 5px rgba(255, 112, 112, 0.8);
}

.status-color.other {
  background: linear-gradient(45deg, #8e8e8e, #aeaeae);
  box-shadow: 0 0 5px rgba(142, 142, 142, 0.8);
}

.status-text {
  font-size: 12px;
  color: #e6e6e6;
  text-shadow: 0 0 3px rgba(0, 194, 255, 0.5);
  display: flex;
  align-items: center;
}

.status-percentage {
  font-weight: bold;
  margin-left: 4px;
  color: #ffffff;
}

.status-text-normal {
  color: #00c2ff;
  text-shadow: 0 0 5px rgba(0, 194, 255, 0.5);
}

.status-text-warning {
  color: #ffcf56;
  text-shadow: 0 0 5px rgba(255, 207, 86, 0.5);
}

.status-text-danger {
  color: #ff7070;
  text-shadow: 0 0 5px rgba(255, 112, 112, 0.5);
}

.status-text-other {
  color: #8e8e8e;
  text-shadow: 0 0 5px rgba(142, 142, 142, 0.5);
}

.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(16, 42, 67, 0.5), rgba(1, 17, 38, 1));
}

#china-map {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00c2ff;
  font-size: 16px;
  z-index: 2;
  text-shadow: 0 0 10px rgba(0, 194, 255, 0.7);
}

@media screen and (max-width: 1600px) {
  #china-map {
    transform: scale(0.9);
  }
}

@media screen and (max-width: 1366px) {
  #china-map {
    transform: scale(0.85);
  }
}

/* 添加径向渐变背景 */
.map-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0, 194, 255, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.map-container :deep(.dv-flyline-chart-enhanced svg) {
  filter: drop-shadow(0 0 8px rgba(0, 194, 255, 0.3));
}

.map-container :deep(.dv-flyline-chart-enhanced) {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 1;
}

/* 添加中国地图轮廓效果 */
.map-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background: url('');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

.map-container :deep(.dv-flyline-chart-enhanced .line-point) {
  transition: all 0.3s;
}

.map-container :deep(.dv-flyline-chart-enhanced .line-point:hover) {
  transform: scale(1.3);
  animation: pointPulse 2s infinite;
}

.map-container :deep(.dv-flyline-chart-enhanced .line-point-text) {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  font-weight: bold;
}

.map-container :deep(.dv-flyline-chart-enhanced .line-point.point-halo) {
  animation: halo 20s infinite linear;
}

@keyframes pointPulse {
  0%, 100% {
    filter: brightness(1);
    transform: scale(1.3);
  }
  50% {
    filter: brightness(1.5);
    transform: scale(1.5);
  }
}

@keyframes halo {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    filter: hue-rotate(180deg) brightness(1.2);
  }
  100% {
    filter: hue-rotate(360deg) brightness(1);
  }
}

/* 根据项目状态设置不同颜色 - 修改为飞线图适用样式 */
.map-container :deep(.line-point[data-status="normal"]) {
  fill: #00c2ff !important;
}

.map-container :deep(.line-point[data-status="warning"]) {
  fill: #ffcf56 !important;
}

.map-container :deep(.line-point[data-status="danger"]) {
  fill: #ff7070 !important;
}

.map-container :deep(.line-point[data-status="other"]) {
  fill: #8e8e8e !important;
}

/* 移除不适用于飞线图的旧样式 */
.map-container :deep(.dv-flyline-chart-enhanced .area-item),
.map-container :deep(.dv-flyline-chart-enhanced .area-item:hover),
.map-container :deep(.dv-flyline-chart-enhanced .area-name),
.map-container :deep(.dv-flyline-chart-enhanced .points-item.status-normal),
.map-container :deep(.dv-flyline-chart-enhanced .points-item.status-warning),
.map-container :deep(.dv-flyline-chart-enhanced .points-item.status-danger),
.map-container :deep(.dv-flyline-chart-enhanced .points-item.status-other) {
  display: none;
}

.key-project-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.project-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px dashed rgba(74, 107, 71, 0.5);
}

.project-info {
  display: flex;
  flex-direction: column;
  max-width: 65%;
}

.project-name {
  font-size: 13px;
  font-weight: bold;
  color: #e6e6e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-phase {
  font-size: 10px;
  color: #b8c5b7;
  margin-top: 2px;
}

.project-status {
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 10px;
  white-space: nowrap;
}

.project-status.normal {
  background-color: rgba(74, 124, 68, 0.3);
  color: #4a7c44;
  border: 1px solid #4a7c44;
}

.project-status.warning {
  background-color: rgba(196, 180, 84, 0.3);
  color: #c4b454;
  border: 1px solid #c4b454;
}

.project-status.danger {
  background-color: rgba(163, 76, 58, 0.3);
  color: #a34c3a;
  border: 1px solid #a34c3a;
}

.project-status.other {
  background-color: rgba(142, 142, 142, 0.3);
  color: #8e8e8e;
  border: 1px solid #8e8e8e;
}

.warning-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.warning-table th {
  background-color: rgba(50, 95, 60, 0.9);
  padding: 4px;
  text-align: left;
  color: #ffffff;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warning-table th:nth-child(1) {
  width: 40px;
}

.warning-table th:nth-child(2) {
  width: 25%;
}

.warning-table th:nth-child(3) {
  width: 25%;
}

.warning-table th:nth-child(4) {
  width: 40%;
}

.warning-table td {
  padding: 4px;
  border-bottom: 1px solid rgba(46, 74, 43, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warning-table tr:nth-child(odd) {
  background-color: rgba(30, 70, 40, 0.7);
}

.warning-table tr:nth-child(even) {
  background-color: rgba(25, 60, 35, 0.7);
}

@media screen and (max-width: 1600px) {
  .main-content {
    padding: 8px;
    gap: 8px;
    height: calc(100vh - 8vh - 5px);
  }
  
  .left-panel, .right-panel {
    gap: 8px;
  }
  
  .right-panel {
    padding-right: 8px;
  }
  
  .key-projects-container, 
  .warning-projects-container {
    padding-right: 4px;
  }
  
  .panel-item {
    margin-bottom: 8px;
  }
  
  .header {
    height: 8vh;
  }
  
  .time-box {
    height: 35px;
  }
  
  .header-time {
    line-height: 35px;
  }
}

@media screen and (max-width: 1366px) {
  .main-content {
    padding: 5px;
    gap: 5px;
    height: calc(100vh - 8vh - 5px);
  }
  
  .left-panel, .right-panel {
    gap: 5px;
  }
  
  .right-panel {
    padding-right: 0;
  }
  
  .key-projects-container, 
  .warning-projects-container {
    padding-right: 3px;
  }
  
  .right-panel .panel-content {
    padding: 8px 4px 8px 8px;
  }
  
  .panel-item {
    margin-bottom: 5px;
  }
  
  .center-panel {
    padding: 0 5px;
  }
  
  .header {
    height: 8vh;
    padding: 0 1%;
  }
  
  .title-box {
    margin: 0 1%;
  }
  
  .left-decoration, .right-decoration {
    width: 12%;
  }
  
  .time-box {
    height: 30px;
    right: 1%;
  }
  
  .header-time {
    line-height: 30px;
  }
  
  .ring-chart-container,
  .ring-chart {
    height: 220px;
  }
  
  .ring-chart-container::after {
    width: 130px;
    height: 130px;
  }
  
  .ring-center-text {
    width: 70px;
    height: 70px;
  }
  
  .total-count {
    font-size: 24px;
  }
  
  .total-label {
    font-size: 11px;
  }
  
  .status-legend-item {
    padding: 2px 6px;
  }
  
  .status-text {
    font-size: 11px;
  }
}

@media screen and (max-width: 1280px) {
  .status-distribution {
    padding: 2px;
  }
  
  .ring-chart-container,
  .ring-chart {
    height: 200px;
  }
  
  .status-legend {
    padding: 0 10px;
    padding-top: 5px;
  }
  
  .status-legend-item {
    padding: 2px 5px;
    margin: 0 2px;
  }
  
  .ring-center-text {
    width: 60px;
    height: 60px;
  }
  
  .total-count {
    font-size: 20px;
  }
  
  .total-label {
    font-size: 10px;
  }
  
  .right-panel .panel-content {
    padding: 6px 3px 6px 6px;
  }
  
  .key-projects-container, 
  .warning-projects-container {
    padding-right: 2px;
  }
}

@media screen and (max-height: 800px) {
  .ring-chart-container,
  .ring-chart {
    height: 180px;
  }
  
  .status-legend {
    margin-top: 2px;
    padding-top: 2px;
  }
}

@media screen and (max-width: 1024px) {
  .header {
    height: 7vh;
  }
  
  .title-text {
    letter-spacing: min(0.2vw, 2px);
  }
  
  .left-decoration, .right-decoration {
    width: 10%;
  }
  
  .time-box {
    width: 18%;
  }
}

@media screen and (max-width: 768px) {
  .header {
    height: 6vh;
  }
  
  .left-decoration, .right-decoration {
    width: 8%;
  }
  
  .title-text {
    padding: 0 1%;
  }
  
  .time-box {
    width: 25%;
    height: 25px;
  }
  
  .header-time {
    font-size: 12px;
    line-height: 25px;
  }
  
  @keyframes titlePulse {
    0%, 100% {
      text-shadow: 0 0 10px rgba(152, 255, 179, 0.6);
      transform: scale(1);
    }
    50% {
      text-shadow: 0 0 15px rgba(152, 255, 179, 0.8);
      transform: scale(1.01);
    }
  }
}

@media screen and (max-width: 480px) {
  .header {
    height: 5vh;
    padding: 0;
  }
  
  .title-box {
    margin: 0;
  }
  
  .title-text {
    font-size: 5vw;
    letter-spacing: 1px;
  }
  
  .left-decoration, .right-decoration {
    display: none;
  }
  
  .tech-decoration {
    width: 100%;
    height: 4px;
  }
  
  .time-box {
    width: 30%;
    height: 20px;
    right: 0;
  }
  
  .header-time {
    font-size: 10px;
    line-height: 20px;
  }
  
  .main-content {
    height: calc(100vh - 5vh - 5px);
    flex-direction: column;
  }
  
  .left-panel, .center-panel, .right-panel {
    width: 100%;
    height: auto;
  }
  
  .left-panel {
    height: 35%;
  }
  
  .center-panel {
    height: 30%;
    padding: 5px 0;
  }
  
  .right-panel {
    height: 35%;
  }
}

/* 确保所有DV组件能够正确显示 */
:deep(.dv-border-box-8),
:deep(.dv-border-box-10),
:deep(.dv-border-box-11),
:deep(.dv-border-box-12),
:deep(.dv-border-box-13) {
  box-sizing: border-box;
  padding: 1px;
  display: flex;
  flex-direction: column;
}

:deep(.dv-decoration-5),
:deep(.dv-decoration-8),
:deep(.dv-decoration-10) {
  z-index: 1;
}

.top-border-decoration {
  width: 100%;
  height: 5px;
  z-index: 10;
}

.phase-type-2 {
  position: relative;
  z-index: 2;
}

.phase-type-2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255, 216, 77, 0) 0%, 
    rgba(255, 216, 77, 0.05) 20%, 
    rgba(255, 216, 77, 0.1) 40%, 
    rgba(255, 216, 77, 0.05) 80%, 
    rgba(255, 216, 77, 0) 100%);
  z-index: -1;
  border-radius: 4px;
  animation: phaseHighlight 3s infinite alternate;
}

@keyframes phaseHighlight {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

/* 重点项目模块样式 */
.key-projects-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-right: 5px;
}

.key-projects-carousel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5px 0;
  perspective: 1000px;
  overflow: hidden;
  min-height: 240px;
}

.key-project-card {
  width: 95%;
  height: auto;
  background: rgba(0, 30, 60, 0.8);
  border-radius: 5px;
  padding: 12px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: absolute;
  transform: scale(0.85);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border: 1px solid rgba(0, 194, 255, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 0;
}

.key-project-card.active {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5),
              0 0 15px rgba(0, 194, 255, 0.4);
}

.key-project-card:not(.active) {
  filter: blur(1px);
}

.key-project-card.status-normal {
  border-top: 3px solid #00c2ff;
}

.key-project-card.status-warning {
  border-top: 3px solid #ffcf56;
}

.key-project-card.status-danger {
  border-top: 3px solid #ff7070;
}

.key-project-card.status-other {
  border-top: 3px solid #8e8e8e;
}

.project-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 194, 255, 0.2);
}

.project-name {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-info {
  margin-bottom: 15px;
}

.project-info-item {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
}

.info-label {
  width: 80px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.info-value {
  flex: 1;
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
}

.status-text-normal {
  color: #00c2ff;
}

.status-text-warning {
  color: #ffcf56;
}

.status-text-danger {
  color: #ff7070;
}

.status-text-other {
  color: #8e8e8e;
}

.project-progress {
  margin-top: auto;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.7);
}

.progress-percentage {
  color: #ffffff;
  font-weight: bold;
}

.progress-bar-container {
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-normal {
  background: linear-gradient(90deg, #0077b6, #00c2ff);
}

.progress-warning {
  background: linear-gradient(90deg, #d97706, #ffcf56);
}

.progress-danger {
  background: linear-gradient(90deg, #dc2626, #ff7070);
}

.progress-other {
  background: linear-gradient(90deg, #4b5563, #8e8e8e);
}

@media screen and (max-width: 1366px) {
  .project-name {
    font-size: 15px;
  }
  
  .info-label,
  .info-value {
    font-size: 12px;
  }
  
  .progress-label {
    font-size: 11px;
  }
}

/* 媒体查询，响应式调整 */
@media screen and (max-width: 1280px) {
  .key-projects-carousel {
    min-height: 210px;
  }
  
  .key-project-card {
    padding: 8px;
    width: 97%;
  }
  
  .project-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }
  
  .project-info-item {
    gap: 5px;
  }
  
  .project-progress {
    margin-bottom: 10px;
  }
}

@media screen and (max-height: 800px) {
  .key-projects-carousel {
    min-height: 190px;
  }
  
  .key-project-card {
    padding: 6px;
  }
  
  .project-timeline {
    height: 25px;
  }
}

/* 滞后项目预警模块样式 */
.warning-projects-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}

.warning-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  background-color: rgba(0, 30, 60, 0.5);
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 3px;
}

.warning-header-item {
  color: #fff;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}

.warning-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

.warning-item {
  background-color: rgba(0, 20, 40, 0.3);
  margin-bottom: 8px;
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.warning-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 194, 255, 0.3);
}

.warning-item-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  padding: 10px;
  align-items: center;
}

.warning-project-name {
  color: #fff;
  font-size: 13px;
  padding-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.warning-project-phase {
  color: #ffd84d;
  font-size: 13px;
  text-align: center;
}

.warning-deadline {
  color: #ff7d7d;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
}

.urgency-high {
  border-left: 3px solid #ff4d4f;
}

.urgency-medium {
  border-left: 3px solid #ffd84d;
}

.urgency-low {
  border-left: 3px solid #8bbbff;
}

/* 自定义滚动条 */
.warning-list::-webkit-scrollbar {
  width: 4px;
}

.warning-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.warning-list::-webkit-scrollbar-thumb {
  background: #0785fd;
  border-radius: 2px;
}

/* 地图详情弹窗样式 */
.map-detail-popup {
  position: absolute;
  width: 280px;
  background: rgba(4, 49, 128, 0.85);
  border: 1px solid #0785fd;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(7, 133, 253, 0.5);
  color: #fff;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #0785fd;
}

.popup-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.popup-close {
  cursor: pointer;
  font-size: 20px;
  color: #0785fd;
}

.popup-close:hover {
  color: #fff;
}

.popup-content {
  padding: 12px;
}

.province-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(7, 133, 253, 0.5);
}

.province-name {
  font-size: 18px;
  font-weight: bold;
  color: #0785fd;
}

.project-total {
  font-size: 15px;
  color: #00c2ff;
}

.city-list {
  max-height: 200px;
  overflow-y: auto;
}

.city-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.city-name {
  color: #fff;
}

.city-count {
  color: #ffcf56;
}

/* 自定义滚动条 */
.city-list::-webkit-scrollbar {
  width: 4px;
}

.city-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.city-list::-webkit-scrollbar-thumb {
  background: #0785fd;
  border-radius: 2px;
}

/* 轮播指示器样式 */
.carousel-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 20px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  width: 10px;
  height: 10px;
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(0, 194, 255, 0.8);
}

.status-bg-normal {
  background-color: #00c2ff;
}

.status-bg-warning {
  background-color: #ffcf56;
}

.status-bg-danger {
  background-color: #ff7070;
}

.status-bg-other {
  background-color: #8e8e8e;
}

@media screen and (max-width: 1366px) {
  .indicator {
    width: 6px;
    height: 6px;
    margin: 0 3px;
  }
  
  .indicator.active {
    width: 8px;
    height: 8px;
  }
}

/* 媒体查询，响应式调整 */
@media screen and (max-width: 1280px) {
  .key-projects-carousel {
    min-height: 210px;
  }
  
  .key-project-card {
    padding: 8px;
    width: 97%;
  }
  
  .project-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }
  
  .project-info-item {
    gap: 5px;
  }
  
  .project-progress {
    margin-bottom: 10px;
  }
}

@media screen and (max-height: 800px) {
  .key-projects-carousel {
    min-height: 190px;
  }
  
  .key-project-card {
    padding: 6px;
  }
  
  .project-timeline {
    height: 25px;
  }
}

@media screen and (max-width: 1024px) {
  .header {
    height: 7vh;
  }
  
  .title-text {
    letter-spacing: min(0.2vw, 2px);
  }
  
  .left-decoration, .right-decoration {
    width: 10%;
  }
  
  .time-box {
    width: 18%;
  }
}

@media screen and (max-width: 768px) {
  .header {
    height: 6vh;
  }
  
  .left-decoration, .right-decoration {
    width: 8%;
  }
  
  .title-text {
    padding: 0 1%;
  }
  
  .time-box {
    width: 25%;
    height: 25px;
  }
  
  .header-time {
    font-size: 12px;
    line-height: 25px;
  }
  
  @keyframes titlePulse {
    0%, 100% {
      text-shadow: 0 0 10px rgba(152, 255, 179, 0.6);
      transform: scale(1);
    }
    50% {
      text-shadow: 0 0 15px rgba(152, 255, 179, 0.8);
      transform: scale(1.01);
    }
  }
}

@media screen and (max-width: 480px) {
  .header {
    height: 5vh;
    padding: 0;
  }
  
  .title-box {
    margin: 0;
  }
  
  .title-text {
    font-size: 5vw;
    letter-spacing: 1px;
  }
  
  .left-decoration, .right-decoration {
    display: none;
  }
  
  .tech-decoration {
    width: 100%;
    height: 4px;
  }
  
  .time-box {
    width: 30%;
    height: 20px;
    right: 0;
  }
  
  .header-time {
    font-size: 10px;
    line-height: 20px;
  }
  
  .main-content {
    height: calc(100vh - 5vh - 5px);
    flex-direction: column;
  }
  
  .left-panel, .center-panel, .right-panel {
    width: 100%;
    height: auto;
  }
  
  .left-panel {
    height: 35%;
  }
  
  .center-panel {
    height: 30%;
    padding: 5px 0;
  }
  
  .right-panel {
    height: 35%;
  }
}

/* 确保所有DV组件能够正确显示 */
:deep(.dv-border-box-8),
:deep(.dv-border-box-10),
:deep(.dv-border-box-11),
:deep(.dv-border-box-12),
:deep(.dv-border-box-13) {
  box-sizing: border-box;
  padding: 1px;
  display: flex;
  flex-direction: column;
}

:deep(.dv-decoration-5),
:deep(.dv-decoration-8),
:deep(.dv-decoration-10) {
  z-index: 1;
}

.top-border-decoration {
  width: 100%;
  height: 5px;
  z-index: 10;
}

.phase-type-2 {
  position: relative;
  z-index: 2;
}

.phase-type-2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255, 216, 77, 0) 0%, 
    rgba(255, 216, 77, 0.05) 20%, 
    rgba(255, 216, 77, 0.1) 40%, 
    rgba(255, 216, 77, 0.05) 80%, 
    rgba(255, 216, 77, 0) 100%);
  z-index: -1;
  border-radius: 4px;
  animation: phaseHighlight 3s infinite alternate;
}

@keyframes phaseHighlight {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

/* 重点项目模块样式 */
.key-projects-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-right: 5px;
}

.key-projects-carousel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5px 0;
  perspective: 1000px;
  overflow: hidden;
  min-height: 240px;
}

.key-project-card {
  width: 95%;
  height: auto;
  background: rgba(0, 30, 60, 0.8);
  border-radius: 5px;
  padding: 12px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: absolute;
  transform: scale(0.85);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border: 1px solid rgba(0, 194, 255, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 0;
}

.key-project-card.active {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5),
              0 0 15px rgba(0, 194, 255, 0.4);
}

.key-project-card:not(.active) {
  filter: blur(1px);
}

.key-project-card.status-normal {
  border-top: 3px solid #00c2ff;
}

.key-project-card.status-warning {
  border-top: 3px solid #ffcf56;
}

.key-project-card.status-danger {
  border-top: 3px solid #ff7070;
}

.key-project-card.status-other {
  border-top: 3px solid #8e8e8e;
}

.project-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 194, 255, 0.2);
}

.project-name {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-info {
  margin-bottom: 15px;
}

.project-info-item {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
}

.info-label {
  width: 80px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.info-value {
  flex: 1;
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
}

.status-text-normal {
  color: #00c2ff;
}

.status-text-warning {
  color: #ffcf56;
}

.status-text-danger {
  color: #ff7070;
}

.status-text-other {
  color: #8e8e8e;
}

.project-progress {
  margin-top: auto;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.7);
}

.progress-percentage {
  color: #ffffff;
  font-weight: bold;
}

.progress-bar-container {
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-normal {
  background: linear-gradient(90deg, #0077b6, #00c2ff);
}

.progress-warning {
  background: linear-gradient(90deg, #d97706, #ffcf56);
}

.progress-danger {
  background: linear-gradient(90deg, #dc2626, #ff7070);
}

.progress-other {
  background: linear-gradient(90deg, #4b5563, #8e8e8e);
}

@media screen and (max-width: 1366px) {
  .project-name {
    font-size: 15px;
  }
  
  .info-label,
  .info-value {
    font-size: 12px;
  }
  
  .progress-label {
    font-size: 11px;
  }
}

/* 媒体查询，响应式调整 */
@media screen and (max-width: 1280px) {
  .key-projects-carousel {
    min-height: 210px;
  }
  
  .key-project-card {
    padding: 8px;
    width: 97%;
  }
  
  .project-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }
  
  .project-info-item {
    gap: 5px;
  }
  
  .project-progress {
    margin-bottom: 10px;
  }
}

@media screen and (max-height: 800px) {
  .key-projects-carousel {
    min-height: 190px;
  }
  
  .key-project-card {
    padding: 6px;
  }
  
  .project-timeline {
    height: 25px;
  }
}

/* 滞后项目预警模块样式 */
.warning-projects-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px 0;
}

.warning-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  background-color: rgba(0, 30, 60, 0.5);
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 3px;
}

.warning-header-item {
  color: #fff;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}

.warning-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

.warning-item {
  background-color: rgba(0, 20, 40, 0.3);
  margin-bottom: 8px;
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.warning-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 194, 255, 0.3);
}

.warning-item-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  padding: 10px;
  align-items: center;
}

.warning-project-name {
  color: #fff;
  font-size: 13px;
  padding-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.warning-project-phase {
  color: #ffd84d;
  font-size: 13px;
  text-align: center;
}

.warning-deadline {
  color: #ff7d7d;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
}

.urgency-high {
  border-left: 3px solid #ff4d4f;
}

.urgency-medium {
  border-left: 3px solid #ffd84d;
}

.urgency-low {
  border-left: 3px solid #8bbbff;
}

/* 自定义滚动条 */
.warning-list::-webkit-scrollbar {
  width: 4px;
}

.warning-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.warning-list::-webkit-scrollbar-thumb {
  background: #0785fd;
  border-radius: 2px;
}

/* 地图详情弹窗样式 */
.map-detail-popup {
  position: absolute;
  width: 280px;
  background: rgba(4, 49, 128, 0.85);
  border: 1px solid #0785fd;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(7, 133, 253, 0.5);
  color: #fff;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #0785fd;
}

.popup-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.popup-close {
  cursor: pointer;
  font-size: 20px;
  color: #0785fd;
}

.popup-close:hover {
  color: #fff;
}

.popup-content {
  padding: 12px;
}

.province-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(7, 133, 253, 0.5);
}

.province-name {
  font-size: 18px;
  font-weight: bold;
  color: #0785fd;
}

.project-total {
  font-size: 15px;
  color: #00c2ff;
}

.city-list {
  max-height: 200px;
  overflow-y: auto;
}

.city-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.city-name {
  color: #fff;
}

.city-count {
  color: #ffcf56;
}

/* 自定义滚动条 */
.city-list::-webkit-scrollbar {
  width: 4px;
}

.city-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.city-list::-webkit-scrollbar-thumb {
  background: #0785fd;
  border-radius: 2px;
}
</style>
